<template>
  <div class="container">
    <!-- 围栏 -->
    <div style="display: flex; height: 100%">
      <el-collapse-transition name="el-zoom-in-left">
        <div v-show="leftShow" class="left">
          <tree
            ref="refreshTree"
            @afterAddGraph="afterAddGraph"
            @mapInfo="mapInfo"
            @select="treeSelect"
            @polyEditor="polyEditor"
          />

          <div @click="leftShow = !leftShow" class="leftBtn">
            <i class="el-icon-arrow-left"></i>
          </div>
        </div>
      </el-collapse-transition>
      <!-- 地图容器 -->
      <div
        class="mapBox"
        :class="{
          leftShow: leftShow == false,
          bottomShow: bottomShow == false,
        }"
        style="position: relative"
      >
        <!-- 地图 -->
        <div
          id="gdMap"
          style="height: 100%; width: 100%"
          v-if="nowMap == 1"
        ></div>

        <div style="height: 100%; width: 100%" v-if="nowMap == 2">
          <Tmap
            ref="worldMap"
            :sContent="$refs.pop"
            @saveFenceInfo="fenceInfo"
            style="height: 100%; width: 100%"
          ></Tmap>
        </div>

        <!-- 编辑矢量图形 -->
        <div class="mapBtn-edit flex-cener" v-if="showEditorBtn">
          <el-button @click="overEdit" type="primary" size="mini"
            >结束修改</el-button
          >
        </div>

        <div style="position: absolute; left: 10px; bottom: 50px; z-index: 999">
          <el-button size="mini" @click="mapchoose(1)">高德地图</el-button>
          <div style="margin: 2px 0"></div>
          <el-button size="mini" @click="mapchoose(2)">天地图</el-button>
        </div>
      </div>
    </div>

    <el-collapse-transition name="el-zoom-in-bottom">
      <div v-show="bottomShow" class="bottom">
        <!-- 表格
        <el-button type="primary" @click="addGraph('polygon')"
          >多边形</el-button
        >
        <el-button type="primary" @click="addGraph('circle')">圆形</el-button> -->
        <div style="margin-bottom: 30px"></div>
        <tableComponent ref="list"></tableComponent>

        <div @click="bottomShow = !bottomShow" class="btnBox">
          <i class="el-icon-arrow-down"></i>
        </div>
      </div>
    </el-collapse-transition>

    <!-- 左侧隐藏后显示的按钮 -->
    <div
      @click="leftShow = !leftShow"
      v-if="leftShow == false"
      class="leftshowBtn flex-cener"
    >
      <span class="el-icon-arrow-right"></span>
    </div>

    <!-- 下面列表隐藏后显示的按钮 -->
    <div
      @click="bottomShow = !bottomShow"
      v-if="bottomShow == false"
      class="bottomBtn flex-cener"
    >
      <span class="el-icon-arrow-up"></span>
    </div>

    <!-- 地图打点弹窗 -->
    <div
      class="markerStyle"
      :style="{ width: popdata.showde ? '400px' : '170px' }"
      ref="pop"
    >
      <div class="markerStyleLeft">
        <p style="margin: 0">车牌：{{ popdata.hbCarNo }}</p>
        <p style="margin: 0">时间：{{ popdata.gpsTime }}</p>
        <div v-show="popdata.labelType == 0">
          <p>类型：{{ popdata.carTypeName }}</p>
          <p>品牌：{{ popdata.carBrandName }}</p>
          <p>型号：{{ popdata.carBrandName }}</p>
        </div>
        <p>
          ACC：<dict-tag
            :options="dict.type.location_acc_status"
            :value="popdata.accState"
            style="display: inline-block; white-space: nowrap"
          />
        </p>
        <p>速度：{{ popdata.speed }}(km/h)</p>
        <p>油量：{{ popdata.dOil }}</p>
        <p>里程：{{ popdata.mileage }}</p>
        <p>位置：{{ popdata.curAddress }}</p>
        <div class="btns">
          <div
            @click="trajectory()"
            style="width: 40px; margin: 0 anto; cursor: pointer"
          >
            <i class="el-icon-location-information fz22"></i>
            <p>轨迹</p>
          </div>
          <div
            @click="track()"
            style="width: 40px; margin: 0 anto; cursor: pointer"
          >
            <i class="el-icon-position fz22"></i>
            <p>跟踪</p>
          </div>
          <div
            @click="video()"
            style="width: 40px; margin: 0 anto; cursor: pointer"
          >
            <i class="el-icon-video-camera fz22"></i>
            <p>视频</p>
          </div>
          <div
            style="width: 40px; margin: 0 anto; cursor: pointer"
            id="showMore"
            @click="
              popdata.showde
                ? (popdata.showde = false)
                : (popdata.showde = true);
              $forceUpdate();
            "
            v-show="popdata.labelType == 0"
          >
            <i class="el-icon-arrow-right fz24 mt20"></i>
          </div>
        </div>
      </div>
      <div class="markerStyleRight" v-show="popdata.showde">
        <p>车 主：{{ popdata.ownerName }}</p>
        <p>车主电话：{{ popdata.ownerContact }}</p>
        <p>驾驶员：{{ popdata.driverName }}</p>
        <p>驾驶员电话：{{ popdata.driverContact }}</p>
        <p>操作证号：{{ popdata.driverCert }}</p>
        <p>发证机构：{{ popdata.certOrg }}</p>
      </div>
    </div>

    <!--  增加圆形弹出-->
    <el-dialog title="增加圆形" width="440px" center :visible="addCircleShow">
      <addCircle
        :toEdit="toEdit"
        @addgraphInfo="addgraphInfo"
        @closed="addCircleClose"
      ></addCircle>
    </el-dialog>
    <!-- 增加多边形图形弹出 -->
    <el-dialog
      title="增加多边形"
      width="440px"
      center
      :visible="addPolygonShow"
    >
      <addPolygon
        :toEdit="toEdit"
        @addgraphInfo="addgraphInfo"
        @closed="addPolygonClose"
      ></addPolygon>
    </el-dialog>

    <!-- 轨迹弹窗 -->
    <trajectorys ref="trajectoryDialog" :toTraCode="toTraCode"></trajectorys>
    <!-- 定位跟踪弹窗 -->
    <tracking ref="trackingDialog" :toTraCode="toTraCode"></tracking>
    <!-- 视频弹窗 -->
    <videos ref="videosDialog" :toEditCode="toEditCode"></videos>
  </div>
</template>

<script>
import api from "@/api/location/fence";
import tree from "./tree.vue";
import tableComponent from "./table.vue";
import addCircle from "./addCircle.vue";
import addPolygon from "./addPolygon.vue";

import trajectorys from "../positioning/dialogTra.vue";
import tracking from "../positioning/dialogPos.vue";
import videos from "../positioning/dialogVideo.vue";
import Tmap from "../../../components/WorldMap/tmapAddgraph.vue";

export default {
  components: {
    tree,
    tableComponent,
    addCircle,
    addPolygon,
    trajectorys,
    tracking,
    videos,
    Tmap,
  },
  dicts: ["location_acc_status"],
  data() {
    return {
      leftShow: true,
      bottomShow: true,
      isCompany: false,
      allCarNum: {},
      popdata: { show: false, labelType: 0, showde: false },
      allCarNum: [],
      notWorkNum: [],
      notWorkOtherNum: [],
      workNum: [],

      toEdit: "",
      addCircleShow: false,
      addPolygonShow: false,
      showEditorBtn: false,
      toTraCode: 0,
      toEditCode: "",
      nowMap: 1,
    };
  },
  mounted() {
    this.initmap();
  },
  methods: {
    initmap() {
      this.map = new AMap.Map("gdMap", {
        //设置地图容器id
        viewMode: "3D", //是否为3D地图模式
        zoom: 13, //初始化地图级别
        center: [104.10194, 30.65984], //初始化地图中心点位置
      });

      let toolBar = new AMap.ToolBar({
        position: {
          top: "110px",
          right: "40px",
        },
      });
      let controlBar = new AMap.ControlBar({
        position: {
          top: "10px",
          right: "10px",
        },
      });
      this.map.addControl(new AMap.Scale());
      this.map.addControl(toolBar);
      this.map.addControl(controlBar);
      this.map.setDefaultCursor("pointer");
      this.mouseTool = new AMap.MouseTool(this.map);

      this.setClusterMraker();
    },
    treeTableSelected(val) {
      this.isCompany = val == "first" ? true : false;
    },

    setClusterMraker(val) {
      console.log(1112);
      let arr = [
        {
          lnglat: [104.10194, 30.65984],
          extData: { hbCarNo: "1213", name: "张三" },
        },
        {
          lnglat: [104.1018, 30.65984],
          extData: { hbCarNo: "1214", name: "李四" },
        },
        {
          lnglat: [104.09, 30.65984],
          extData: { hbCarNo: "1214", name: "李四" },
        },
        {
          lnglat: [104.08, 30.65984],
          extData: { hbCarNo: "1214", name: "李四" },
        },
      ];
      arr = val;
      console.log(arr, "====>");
      if (this.markerClusterer) {
        this.markerClusterer.setMap(null);
      }
      // 此处为点聚合
      this.markerClusterer = new AMap.MarkerCluster(this.map, arr, {
        gridSize: 100,
        // renderClusterMarker: renderClusterMarker, // 自定义聚合点样式
        renderMarker: this.renderMarker, // 自定义非聚合点样式
      });

      //添加聚合点点击事件
      this.markerClusterer.on("click", (data) => {
        console.log(data);
        let canBoost = false;
        //判断是否是聚合点，不是聚合点就执行单个点击方式
        if (data.clusterData.length > 1) {
          canBoost = true;
        } else {
          data.clusterData.forEach((item) => {
            if (item._amapMarker.count > 1) {
              canBoost = true;
            }
            return;
          });
        }

        //计算所有聚合点的中心点
        let alng = 0,
          alat = 0;
        for (const m of data.clusterData) {
          alng += m.lnglat.lng;
          alat += m.lnglat.lat;
        }
        const lat = alat / data.clusterData.length;
        const lng = alng / data.clusterData.length;
        //以中心点固定倍数放大地图，达到展开聚合点的效果
        if (canBoost) {
          let level = this.map.getZoom();
          this.map.setZoom(level + 2);
          this.map.setCenter([lng, lat]);
        }
      });
    },

    renderMarker(context) {
      const marker = context.marker;
      const item = context.data[0].extData;
      // item.defaultIcon
      let icon = new AMap.Icon({
        image: item.defaultIcon,
        size: new AMap.Size(50, 50),
        imageSize: new AMap.Size(50, 50),
      });
      let label = {
        content:
          "<div style='height:14px;padding:2px;border:1px solod blue;'><span style='background:#f39c12;color:#fff;'>" +
          item["hbCarNo"] +
          "</span></div>",
        offset: new AMap.Pixel(0, -10),
        direction: "top",
      };

      marker.setIcon(icon);
      marker.setLabel(label);

      // 给点添加点击事件
      let that = this;
      marker.on("click", (e) => {
        console.log(e, item);
        this.popdata = item;

        let infoWindow = new AMap.InfoWindow({
          isCustom: true, //使用自定义窗体
          autoMove: true,
          closeWhenClickMap: true,
          content: that.$refs.pop,
          size: new AMap.Size(12, 12),
          offset: new AMap.Pixel(16, -45),
          // position: marker.getPosition(),
          retainWhenClose: true,
        });

        infoWindow.open(this.map, e.target.getPosition());
      });
    },
    afterAddGraph(val) {
      console.log("=====asd", val.value);
      this.addgraphParmas = val;
      console.log(this.nowMap, 123);
      if (val.value == "polygon") {
        //多边形
        this.addgraphParmas.fenceType = "polygon";
      } else if (val.value == "circle") {
        //圆
        this.addgraphParmas.fenceType = "circle";
      }
      this.toEdit = {
        id: "",
        name: "",
        areaType: "",
      };

      if (this.nowMap == 1) {
        this.addGraph(val.value);
      } else if (this.nowMap == 2) {
        this.$refs.worldMap.Addgraph(val.value);
        return false;
      }
    },
    // 绘制图形
    addGraph(val) {
      this.type = val;
      // this.addgraphParmas = {};
      this.$message("请在地图区域画图");

      this.mouseTool = new AMap.MouseTool(this.map);

      // 绘制矢量图形
      const that = this;
      function draw(type) {
        // alert(type);
        switch (type) {
          case "marker": {
            that.mouseTool.marker({
              //同Marker的Option设置
            });
            break;
          }
          case "polyline": {
            that.mouseTool.polyline({
              strokeColor: "#80d8ff",
              //同Polyline的Option设置
            });
            break;
          }
          case "polygon": {
            that.mouseTool.polygon({
              strokeColor: "red",
              fillColor: "green",
              fillOpacity: 0.35,
              //同Polygon的Option设置
            });
            break;
          }
          case "rectangle": {
            that.mouseTool.rectangle({
              fillColor: "#00b0ff",
              strokeColor: "#80d8ff",
              //同Polygon的Option设置
            });
            break;
          }
          case "circle": {
            that.mouseTool.circle({
              fillColor: "#00b0ff",
              strokeColor: "#80d8ff",
              //同Circle的Option设置
            });
            break;
          }
        }
      }

      if (val == "polygon") {
        //多边形
        this.addgraphParmas.fenceType = "polygon";
        draw("polygon");
      } else if (val == "circle") {
        //圆
        this.addgraphParmas.fenceType = "circle";
        draw("circle");
      } else if (val == "rectangle") {
        //矩形
        this.addgraphParmas.fenceType = "rectangle";
        draw("rectangle");
      }

      // 绘制事件监听
      this.mouseTool.on("draw", (e) => {
        // console.log(e)
        if (val == "polygon") {
          //多边形
          let draw = e.obj.getOptions().path;
          console.log(draw);
          let obj = [];
          draw.forEach((i, e) => {
            let arr = [i[0], i[1]];
            obj.push(arr);
          });
          if (obj) {
          }
          console.log("多边形", obj);
          this.addgraphParmas.detail = obj;
          this.addPolygonShow = true;
        } else if (val == "circle") {
          //圆
          console.log(e.obj.getRadius()); //半径
          console.log(e.obj.getCenter().lat); //中心点坐标
          let obj = {
            r: "",
            center: [],
          };
          let latitude = e.obj.getCenter().lat;
          let longitude = e.obj.getCenter().lng;
          obj.center = [longitude, latitude];
          obj.r = e.obj.getRadius(); //半径
          this.addgraphParmas.detail = obj;
          console.log(this.addgraphParmas.detail);
          this.addCircleShow = true;
        } else if (val.id == "rectangle") {
          //矩形
          // console.log(e.obj.getBounds()) //获取矩形范围
          let southWest = e.obj.getBounds().getSouthWest();
          let northEast = e.obj.getBounds().getNorthEast();
          let details = {
            southWest: [],
            northEast: [],
          };
          details.southWest = {
            latitude: southWest.lat,
            longitude: southWest.lng,
          };
          details.northEast = {
            latitude: northEast.lat,
            longitude: northEast.lng,
          };
          this.addgraphParmas.Detail = JSON.stringify(details);
          // this.addGraphPop.show = true
        }
      });
    },
    // 保存图形信息围栏(新增/编辑)
    addgraphInfo(val) {
      console.log("====", val);
      console.log("==addgraphParmas==", this.addgraphParmas);
      this.addCircleShow = false; //圆隐藏
      this.addPolygonShow = false;
      let shape = this.addgraphParmas;

      let params = {
        fenceId: val.id ? val.id : null,
        districtId: shape.cityId, //区域
        fenceType: shape.fenceType,
        fenceName: val.name, //区域名称
        areaType: val.areaType,
        remark: val.remark, //描述
        detail: JSON.stringify(shape.detail),
        // fencePolygonJson: shape.polygons.length > 0 ? shape.polygons : [], //矩形围栏坐标
        // centerPoint: shape.detail ? shape.detail.centerPoint : "", //圆形中心点坐标
        // radius: shape.detail ? shape.detail.radius : "", //圆形中心点坐标
      };
      console.log(params);
      if (val.id) {
        api.updateFence(params).then((res) => {
          // console.log(res,'增加图形接口返回值')
          // res.data.Code == 500  //围栏名称已存在
          if (res.code == 200) {
            this.$message.success("修改成功");
            // 刷新左侧树
            this.$refs.refreshTree.getAearTree();
            if (this.nowMap == 1) {
              this.map.clearMap();
            } else if (this.nowMap == 2) {
              this.$refs.worldMap.clearLayer();
            }
          } else {
            this.$message.warring(res.message);
          }
        });
      } else {
        api.addFence(params).then((res) => {
          // console.log(res,'增加图形接口返回值')
          // res.data.Code == 500  //围栏名称已存在
          if (res.code == 200) {
            this.$message.success("添加成功");
            // 刷新左侧树
            this.$refs.refreshTree.getAearTree();
            //清除地图上的覆盖物
            if (this.nowMap == 1) {
              this.mouseTool.close(true);
            } else if (this.nowMap == 2) {
              this.$refs.worldMap.clearLayer();
            }
          } else {
            this.$message.warring(res.message);
          }
        });
      }
    },

    // 查询围栏信息
    mapInfo(val) {
      console.log("查询围栏信息===", val);

      if (this.nowMap == 1) {
        this.gmapdraw(val);
      } else if (this.nowMap == 2) {
        this.$refs.worldMap.drawLayer(val);
      }
    },
    // 高德地图绘制围栏
    gmapdraw(val) {
      console.log("===1", val);
      this.map.clearMap();
      this.markerClusterer.setMap(null);
      if (val.length) {
        let newVal = [];
        val.forEach((e) => {
          // let arr = JSON.parse(e.gaodeDetail);
          console.log(e);
          //多边形polygon
          if (e.fenceType == "polygon") {
            let lnglatData = JSON.parse(e.detail);
            setTimeout(() => {
              this.polygon = new AMap.Polygon({
                path: lnglatData,
                strokeColor: "red",
                strokeWeight: 6,
                strokeOpacity: 0.2,
                fillOpacity: 0.4,
                fillColor: "pink",
                zIndex: 50,
              });
              this.map.add(this.polygon);
              this.map.setFitView([this.polygon]);
            }, 900);
          }
          // 圆circle
          if (e.fenceType == "circle") {
            let detail = JSON.parse(e.detail);
            let center = detail.center;
            console.log(center);
            this.circle = new AMap.Circle({
              center: new AMap.LngLat(center[0], center[1]), // 圆心位置
              radius: detail.r, // 圆半径
              strokeColor: "red",
              strokeWeight: 6,
              strokeOpacity: 0.2,
              fillOpacity: 0.4,
              fillColor: "pink",
              strokeWeight: 2, // 描边宽度
            });
            this.map.add(this.circle);
            this.map.setFitView([this.circle]);
          }
          // 矩形rectangle
          if (e.fenceType == "rectangle") {
            var southWest = new AMap.LngLat(
              arr.southWest.longitude,
              arr.southWest.latitude
            );
            var northEast = new AMap.LngLat(
              arr.northEast.longitude,
              arr.northEast.latitude
            );

            var bounds = new AMap.Bounds(southWest, northEast);
            this.rectangle = new AMap.Rectangle({
              bounds: bounds,
              strokeColor: "red",
              strokeWeight: 2,
              strokeOpacity: 0.5,
              strokeStyle: "dashed",
              fillColor: "pink",
              fillOpacity: 0.5,
              cursor: "pointer",
              zIndex: 50,
            });
            this.map.add(this.rectangle);
            this.map.setFitView([this.rectangle]);
          }

          if (e.carInfo) {
            this.beforeSetClusterMraker(e.carInfo);
          }
        });
      } else {
        this.map.clearMap();
      }
    },
    beforeSetClusterMraker(val) {
      let arr = [];
      val.forEach((e, i) => {
        if (e.gdLng && e.gdLat) {
          // console.log(i, "=======>", e.googleLongitude, e.googleLatitude);
          let lnglat = [e.gdLng, e.gdLat];
          let extData = e;
          arr.push({
            lnglat: lnglat,
            extData: extData,
          });
        }
      });
      setTimeout(() => {
        // console.log("=====arr", arr);
        this.setClusterMraker(arr);
      }, 800);
    },
    // 修改围栏
    polyEditor(val) {
      console.log("=====val", val);
      this.addgraphParmas = {};
      // console.log(this.addgraphParmas, "======this.addgraphParmas");
      this.addgraphParmas.cityId = val.pid;
      this.addgraphParmas.fenceType = val.fenceType;
      this.addgraphParmas.id = val.id;

      setTimeout(() => {
        this.showEditorBtn = true;
        this.toEdit = val;
        if (this.nowMap == 1) {
          this.gmapPolyEditor(val);
        } else if (this.nowMap == 2) {
          if (val.fenceType == "polygon") {
            this.$refs.worldMap.editPolygon(val);
          } else if (val.fenceType == "circle") {
            this.$refs.worldMap.editCircle(val);
          }
        }
      }, 1000);
    },
    gmapPolyEditor(val) {
      // 多边形polygon
      if (val.fenceType == "polygon") {
        console.log("多边形==1", this.polygon);
        this.polyEditors = new AMap.PolyEditor(this.map, this.polygon);
        // 开启编辑模式
        this.polyEditors.open();
        this.polyEditors.on("end", (e) => {
          console.log("====END", this.polygon.getPath());
          let latlngs = this.polygon.getPath();
          let obj = latlngs.map((item, e) => {
            console.log(item.lng, item.lat);
            return [item.lng, item.lat];
          });
          this.addgraphParmas.detail = obj;
          this.toEdit = val;
          this.addPolygonShow = true;
          // this.addGraphPop.title = "编辑图形";
        });
      }
      //编辑圆circle
      if (val.fenceType == "circle") {
        let radius = 0;
        let lnglat = [];
        console.log(this.circle);
        this.polyEditors = new AMap.CircleEditor(this.map, this.circle);
        this.polyEditors.open();
        this.polyEditors.on("adjust", (e) => {
          console.log("=======调整后", e);
          radius = e.radius; //调整后的半径
          lnglat = e.lnglat; //调整后的半径
        });

        this.polyEditors.on("end", (e) => {
          let obj = {
            r: "",
            center: [],
          };
          obj.r = radius;
          obj.center = [lnglat.lng, lnglat.lat];
          this.addgraphParmas.detail = obj;
          // this.addCircle.title = "编辑圆";
          this.toEdit = val;
          this.addCircleShow = true;
        });
      }
      // //编辑矩形rectangle
      // if (val.fenceType == "rectangle") {
      //   this.map.plugin(["AMap.RectangleEditor"], () => {
      //     this.polyEditors = new AMap.RectangleEditor(this.map, this.rectangle);
      //     this.polyEditors.open();
      //     this.polyEditors.on("adjust", (e) => {
      //       // console.log(e.Rd.northeast)
      //       // console.log(e.Rd.southwest)
      //       let southWest = e.Rd.southwest;
      //       let northEast = e.Rd.northeast;
      //       let details = {
      //         southWest: [],
      //         northEast: [],
      //       };
      //       details.southWest = {
      //         latitude: southWest.lat,
      //         longitude: southWest.lng,
      //       };
      //       details.northEast = {
      //         latitude: northEast.lat,
      //         longitude: northEast.lng,
      //       };
      //       this.addgraphParmas.Detail = JSON.stringify(details);
      //     }),
      //       this.polyEditors.on("end", (e) => {
      //         this.addGraphPop.title = "编辑矩形";
      //         this.toEdit = val;
      //         this.addGraphPop.show = true;
      //       });
      //   });
      // }
    },

    treeSelect(str) {
      console.log(str);
      this.$refs.list.str = str.toString();
      this.$refs.list.getData(this.$refs.list.page);
    },
    addCircleClose() {
      this.addCircleShow = false;
      this.map.clearMap();
    },
    addPolygonClose() {
      this.addPolygonShow = false;
      this.map.clearMap();
    },
    // 结束围栏修改
    overEdit() {
      this.showEditorBtn = false;
      if (this.nowMap == 1) {
        this.polyEditors.close();
      } else if (this.nowMap == 2) {
        if (this.toEdit.fenceType == "circle") {
          this.$refs.worldMap.endeditCircle();
        } else if (this.toEdit.fenceType == "polygon") {
          this.$refs.worldMap.endeditPolygon();
        }
      }
    },
    // 轨迹被点击
    trajectory() {
      console.log(this.popdata);
      let obj = {
        show: true,
        deviceNumber: this.popdata.terminalCode,
      };
      obj.mapType = "GMAP";
      // if (this.nowMap == 1) {
      //   obj.mapType = "GMAP";
      // } else if (this.nowMap == 2) {
      //   obj.mapType = "TMAP";
      // }
      this.$refs.trajectoryDialog.show(obj);
      this.toTraCode = this.popdata.hbCarNo;
      // this.toTraCode = this.popdata.hashId;
    },
    // 定位被点击
    track() {
      console.log(this.popdata);
      let obj = this.popdata;
      obj.mapType = "GMAP";
      // if (this.nowMap == 1) {
      //   obj.mapType = "GMAP";
      // } else if (this.nowMap == 2) {
      //   obj.mapType = "TMAP";
      // }
      obj.show = true;
      console.log(this.$refs.trackingDialog);

      this.$refs.trackingDialog.init(obj);
      this.toTraCode = this.popdata.hbCarNo;
      // this.toTraCode = this.popdata.hashId;
    },
    // 视频被点击
    video() {
      this.toEditCode = this.popdata.hbCarNo;
      // this.$refs.videosDialog.init();
    },
    // 地图选择
    mapchoose(val) {
      this.nowMap = val;
      if (val == 1) {
        this.map.clearMap();
        this.map.resize();
      }
    },
    // 保存围栏信息
    fenceInfo(val) {
      console.log("天地图返回数据======", val);
      console.log("====toEdit==", this.toEdit);
      this.addgraphParmas.detail = val.detail;
      console.log(this.addgraphParmas);
      if (val.fenceType == "polygon") {
        this.addPolygonShow = true;
      } else if (val.fenceType == "circle") {
        this.addCircleShow = true;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
p {
  margin: 0;
}
.container {
  height: calc(100vh - 80px);
  width: 100%;
  .left {
    width: 300px;
    height: 64%;
    // background: #ccc;
    position: relative;
    .leftBtn {
      width: 40px;
      height: 20px;
      position: absolute;
      top: 10px;
      right: 20px;
      z-index: 1;
    }
  }
  .bottom {
    height: calc(36% - 10px);
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0px;
    // border: 1px solid red;
    // background: #ccc;
    // z-index: 1;
    .btnBox {
      position: absolute;
      right: 15px;
      top: 10px;
    }
  }
  .bottomBtn {
    height: 30px;
    width: 30px;
    background: #fff;
    border-radius: 4px;
    position: absolute;
    bottom: 20px;
    right: 20px;
  }
  .leftshowBtn {
    height: 30px;
    width: 30px;
    background: #fff;
    border-radius: 4px;
    position: absolute;
    top: 20px;
    left: 20px;
  }
  .mapBox {
    height: 64%;
    width: calc(100% - 300px);
    .mapBtn-car {
      position: absolute;
      left: 70px;
      top: 20px;
      z-index: 999;
      .button {
        margin-left: 1px !important;
      }
    }
    .mapBtn-edit {
      position: absolute;
      right: 60px;
      bottom: 20px;
      z-index: 999;
      padding: 4px 18px;
    }
  }
  .mapBox.leftShow {
    width: 100%;
  }
  .mapBox.bottomShow {
    height: 100%;
  }
  .mapBox.leftShow.bottomShow {
    width: 100%;
    height: 100%;
  }
  .markerStyle {
    display: flex;
    font-size: 12px;
    background: #ebe9e5;
    padding: 15px 12px !important;
    line-height: 18px !important;
    border-radius: 5px;
    box-shadow: 1px 3px 8px #555 !important;
    .btns {
      display: flex;
      .fz22 {
        font-size: 22px;
      }
    }
  }
}
.flex-cener {
  display: flex;
  align-items: center;
  justify-content: center;
}
// ::v-deep .el-dialog__body {
//   padding: 10px;
// }
</style>
